<template>
  <div id="consultationand" ref="consultationand">
    <div style="height:20%;"></div>
    <van-tabs class="csltd_tabs" :animated="true" v-model="type" color="#d58913" background="inherit"
      @change="tabschange">
      <van-tab title="全部" name="0" />
      <van-tab title="已提交" name="1" />
      <van-tab title="已回复" name="2" />
    </van-tabs>
    <van-pull-refresh class="csltd_refresh" v-model="refreshing" @refresh="onRefresh">
      <van-list class="csltd_list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell class="csltd_cell" v-for="(item, index) in list" :key="index" :title="item.title"
          @click="textClick(item.id)">
          {{ item.content }}
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <div class="csltd_but">
      <van-button @click="() => {
        this.$router.push({
          path: '/school/information',
          query: {
            ...this.$route.query,
          },
        })
      }" class="csltd_button">咨询</van-button>
    </div>
  </div>
</template>

<script>
import { getConsultList } from "@/api/school"
export default {
  name: 'consultationand',
  data() {
    return {
      url: {
        background_img_ipg: require('@/assets/images/school/background_img_ipg.jpg'),
      },
      type: '0',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  mounted() {
    this.$refs.consultationand.style.backgroundImage = "url(" + this.url.background_img_ipg + ")";
  },
  methods: {
    tabschange() {
      this.onLoad()
    },
    onRefresh() {
      // 清空列表数据
      this.list = []
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      const { key, card_no, name, mobile } = this.$route.query
      setTimeout(() => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        this.loading = false
        getConsultList({ type: this.type, phone: mobile, }).then(res => {
          this.list = res.data.data.results;
        })
        this.finished = true
      }, 200);
    },
    textClick(id) {
      this.$router.push({
        path: '/school/reply',
        query: {
          ...this.$route.query,
          id: id,
        },
      })
    }
  },
}
</script>

<style scoped lang="less">
#consultationand {
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;

  .csltd_tabs {
    width: 100%;
    height: 3rem;

    /deep/ .van-tab--active {
      color: #d58913;
      font-size: 1.1rem;
    }

    /deep/ .van-tab {
      font-size: 1.02rem;
    }
  }


  .csltd_refresh {
    width: 100%;
    height: calc(80% - 8rem);
    overflow-y: scroll;

    .csltd_list {
      background: #f2f2f2;

      /deep/ .csltd_cell {
        background: #f2f2f2;
        text-align: left;
        text-indent: 2em;

        /deep/ .van-cell__value {
          text-align: left;
        }
      }
    }
  }

  .csltd_but {
    width: 100%;
    text-align: center;
    height: 5rem;

    .csltd_button {
      height: 1.8rem;
      width: 10rem;
      margin: 1.6rem;
      background-color: inherit;
      border: 2px solid lightgray;
      color: gray;
    }
  }
}
</style>
